<template>
	<u-popup :show="isPriceLine" @close="hide" mode="bottom" closeable>
		<view class="cu-dialog u-bg-white " :style="skin">
			<div class="cu-bar">
				<text class="title">
					<text class="u-primary mr12">{{ goodsName }}</text>
					价格走势
				</text>
			</div>
			<div class="content">
				<div class="tags margin-bottom-sm">
					<span class="cu-tag round " :class="[day == 'week' ? 'active' : '']" @click="changeDay('week')">最近一周</span>
					<span class="cu-tag round " :class="[day == 'month' ? 'active' : '']" @click="changeDay('month')">最近一月</span>
				</div>
				<line-charts v-if="isPriceLine" :opts="lineopts" chartType="line" :cWidth="cWidth" :cHeight="cHeight" ref="line"></line-charts>
			</div>
		</view>
	</u-popup>
</template>

<script>
import LineCharts from '@/js_sdk/u-charts/u-charts/component.vue';
export default {
	name: 'priceModal',
	data() {
		return {
			day: 'week',
			lineopts: {
				categories: [],
				series: []
			},
			cWidth: 355,
			cHeight: 250,
			isPriceLine: false,
			goodsName: ''
		};
	},
	components: { LineCharts },
	methods: {
		hide() {
			this.isPriceLine = false;
		},
		show(info) {
			this.isPriceLine = true;
			this.goodsId = info.id;
			this.goodsName = info.name;
			this.getPriceLine(this.goodsId, 'week');
		},
		getPriceLine(goodsId, day) {
			// day 值 week  month  lastMonth
			this.$postAction(this.$api.priceLine + goodsId, { day }).then(da => {
				if (da.code == 0) {
					let categories = [];
					let avg_price = [],
						max_price = [],
						min_price = [];
					for (var i = 0; i < da.data.length; i++) {
						categories.push(da.data[i].created);
						avg_price.push(da.data[i].avg_price);
						max_price.push(da.data[i].max_price);
						min_price.push(da.data[i].min_price);
						console.log('categories', categories);
					}

					this.lineopts = {
						categories: categories,
						series: [
							{
								name: '最高价',
								data: max_price
							},
							{
								name: '最低价',
								data: min_price
							},
							{
								name: '平均价',
								data: avg_price
							}
						]
					};
					console.log(this.lineopts);
					this.$nextTick(() => {
						this.$refs.line.changeData(this.lineopts);
					});
				}
			});
		},
		changeDay(day) {
			this.day = day;
			this.getPriceLine(this.goodsId, day);
		}
	}
};
</script>

<style scoped lang="scss">
.cu-dialog {
	padding: 32upx 28upx;
}
.title {
	color: #000;
	font-size: 32upx;
	font-weight: 500;
}
.tags {
	.cu-tag {
		width: 153upx;
		height: 57upx;
		border-radius: 29upx;
		border: 1px solid #979797;
		font-size: 26upx;
		text-align: center;
		line-height: 57upx;
		&.active {
			font-weight: 500;
			color: #fff;
			background: var(--nav-bg);
			border-color: var(--nav-bg);
		}
		& + .cu-tag {
			margin-left: 12upx;
		}
	}
}
</style>
